<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>四种文字动画</title>
  <style>
    :root {
      font-size: 20px;
    }

    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      font-size: 4rem;
    }

    .container {
      text-align: center;
    }

    span {
      /* animation-name: var(--animation-name); */
      /* tramsform只能对block元素触发？ */
      display: inline-block;
    }


    /*animate为动画类*/
    .text.animate span {
      animation-name: var(--animation);
      animation-duration: .4s;
      animation-timing-function: ease-in-out;
      animation-delay: var(--delay);
    }

    @keyframes jump {

      0%,
      100% {
        transform: translateY(0px);
      }

      50% {
        transform: translateY(-10px);
      }
    }

    @keyframes pop {

      0%,
      100% {
        transform: scale(1);
      }

      50% {
        transform: scale(1.15);
      }
    }

    @keyframes flip {

      0%,
      100% {
        transform: rotateY(0deg);
      }

      50% {
        transform: rotateY(90deg);
      }
    }

    @keyframes blink {

      0%,
      100% {
        /*继承父元素的文字颜色*/
        color: inherit;
      }

      50% {
        color: yellow
      }
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="text">HelloWorld!</div>
    <button class="jump" data-animation="jump">jump</button>
    <button class="pop" data-animation="pop">pop</button>
    <button class="flip" data-animation="flip">flip</button>
    <button class="blink" data-animation="blink">blink</button>


  </div>


  <script>
    //添加span的两个问题：1最好使用textContent获取里面的文字2.replace不会修改原来的dom，需要重新赋值textContainer
    const textContainer = document.querySelector('.text')
    textContainer.innerHTML = textContainer.textContent.replace(/\S/g, '<span>$&</span>')

    document.querySelectorAll('span').forEach((span, index) => {
      span.style.setProperty('--delay', `${index * 0.1}s`)
    })


    document.querySelectorAll('button').forEach(button => {
      button.addEventListener('click', e => {
        textContainer.style.setProperty('--animation', e.target.getAttribute('data-animation'))

        textContainer.classList.remove('animate')
        void textContainer.offsetWidth //reflow 不然删除class之后立马增加class无法无法触发动画
        textContainer.classList.add('animate')
      })
    })
  </script>
</body>

</html>